import React, {memo, useEffect, useState} from 'react';
import {renderRoutes} from "react-router-config";

import "./index.css";
import Header from "../../../components/main-header/Header";
import PageNavigation from "../../../components/pageNavigation/PageNavigation";
import {LOAD_ANALYSIS} from "../../../common/loadType";
import {message} from "antd";
import {useDispatch, useSelector} from "react-redux";
import {saveData} from "../store/actionCreators";
import {calCqMean, calQuantityMean, deepClone, getAnalysisInfo, getContextPath, getExcelData} from "../../../common/utils";
import {saveAnalysisShowLineArr} from "../plate/store/actionCreators";
import request from "../../../services/request";

export default memo(function Calculationdata(props) {
  const dispatch = useDispatch();
  const {data, isCN} = useSelector(state => ({
    data: state.dataReducer.data,
    isCN: state.languageReducer.isCN
  }));
  const [showExportAside, setShowExportAside] = useState(false);
  const [excelTitle, setExcelTitle] = useState([
    {name: "Quantification Results", selected: true},
    {name: "Melt Data", selected: false},
    {name: "RFU spreadsheet", selected: false},
    {name: "RFU melt", selected: false},
    {name: "Gene Expression Data", selected: false},
    {name: "Allelic Discrimination", selected: false},
    {name: "QC Summary", selected: false},
    {name: "Determination Data", selected: false}
  ]);
  const [exportUrl] = useState("");
  let cloneExcelTitle = [];

  useEffect(() => {
    if (!exportUrl) {
      return;
    }
    let iframe = document.createElement("iframe");
    iframe.src = exportUrl;
    iframe.style.display = "none";
    document.body.appendChild(iframe);
    setTimeout(() => iframe.remove(), 1000);
  }, [exportUrl]);

  //  选择导出的内容
  function selectExportItem(indey) {
    cloneExcelTitle = deepClone(excelTitle, cloneExcelTitle);
    cloneExcelTitle[indey].selected = !cloneExcelTitle[indey].selected;
    setExcelTitle(cloneExcelTitle);
  }


  //  重新分析实验
  function analysisExperiment() {
    request({
      url: 'analysis/calAll',
      data: data,
      method: 'post'
    })
      .then(res => {
        switch (res.code) {
          case 200:
            //  保存data
            calCqMean(res.data);
            calQuantityMean(res.data);
            dispatch(saveData(res.data));
            dispatch(saveAnalysisShowLineArr(getAnalysisInfo(res.data).analysisShowLineArr)); //  保存可以画线的数据(只有target和sample同时选择后才能画线)
            // saveEndPointSetting(res.data);
            break;
          case 500:
            message.error(res.message);
            break;
          default:
            message.error("error");
            // TODO: 排查错误
            console.log(res);
        }
      })
      .catch(err => message.error(err));
  }

  return (
    <div>
      <Header name={isCN ? "校准计算" : "Calibration"}
              imgPosition="-200px"
              isLoad={true}
              isSave={true}
              isExport={true}
              isAnalysis={true}
              analysisAction={analysisExperiment}
              loadType={LOAD_ANALYSIS}
              setShowExportAside={setShowExportAside}
      />
      <section className="mainSection">
        {/*<PageNavigation navContent={isCN ? navContent_CN : navContent}/>*/}
        {renderRoutes(props.route.routes)}
      </section>
      {
        showExportAside
          ? <aside className="exportAside asideBoxHeader">
            <header>
              <div>
                <p>Export Excel</p>
                <p onClick={() => setShowExportAside(false)}/>
              </div>
              <hr/>
            </header>
            <section>
              <ul>
                {
                  excelTitle.map((item, index) => (
                    <li key={item.name}>
                      <div className={item.selected ? "selectedStyle" : null}
                           onClick={() => selectExportItem(index)}
                      />
                      <div>{item.name}</div>
                    </li>
                  ))
                }
              </ul>
            </section>
          </aside>
          : null
      }
    </div>
  );
});